<template>
    <el-col class="childText" :xs="xs" :sm='sm' >
        <div>
            <label :style="'width:'+ autoWidth"> {{ title + ' : ' }} </label>
            <div :style="'margin-left:' + autoWidth">
                <span v-if="!isslot">{{ value }}</span>
                <slot :data="value"></slot>
            </div>
        </div>
    </el-col>
</template>
<script>
export default {
    name:'childText',
    props:{
        width:{
            type:String,
            default:"80px"
        },
        title:{
            type:String,
            default:''
        },
        value:{
            type:String | Array,
            default:'-'
        },
        xs:{
            type:Number,
            default:12
        },
        sm:{
            type:Number,
            default:8
        },
        isslot:{
            type:Boolean,
            default:false
        }
    },
    computed:{
        autoWidth(){
            return window.innerWidth > 479 ? this.width : '75px'
        }
    }
}
</script>
<style type="text/scss" lang="scss" scoped>
    .childText {
        >div {
            height: 40px;
            line-height: 40px;
        }
        > div > label {
            float: left;
            text-align: right;
            margin-right: 10px;
        }
    }
</style>


